বুটস্ট্রাপ গ্রীড সিস্টেমের মাধ্যমে একটি পেজকে ১২টি কলাম পর্যন্ত ভাগ করা যায়।
আপনার যদি ১২ কলাম একসাথে প্রয়োজন না হয়, তাহলে আপনি চাইলে বেশি প্রশস্থের বিভিন্ন কম্বিনেশনে কলাম গ্রুপ তৈরি করে নিতে পারেনঃ
span 12 | |||||||||||
span 6 | span 6 | ||||||||||
span 4 | span 8 | ||||||||||
span 4 | span 4 | span 4 | |||||||||
span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 |
বুটস্ট্রাপের গ্রীড সিস্টেম রেসপন্সিভ এবং স্ক্রিনের আকারের উপর নির্ভর করে কলামগুলো বিন্যাসিত হয়: বড় স্ক্রিনে হয়তো একটি কন্টেন্ট ৩ কলামে পাশাপাশি দেখতে ভাল লাগে, কিন্তু ঐ কন্টেন্টই ছোট স্ক্রিনে নিচে নিচে দেখালে দেখতে ভাল লাগবে।
বুটস্ট্রাপ গ্রীড সংক্রান্ত চারটি ক্লাস রয়েছেঃ
অধিক ডায়নামিক এবং ফ্লেক্সিবল লে-আউট তৈরি করার জন্য উপরের ক্লাস গুলো একত্রে বিভিন্ন কম্বিনেশনে ব্যবহার করা যায়।
টিপসঃ আপনি যদি xs, sm এবং md আকারের ডিভাইসের জন্য একই লে-আউট নির্ধারন করতে চান, তাহলে শুধুমাত্র xs এর জন্য লে-আউট নির্ধারণ করলেই সকল স্ক্রিনে একই রকম দেখাবে।
বুটস্ট্রাপ গ্রীড সিস্টেমের কিছু রুলসঃ
.row
কে অবশ্যই .container
(fixed-width) অথবা .container-fluid
(full-width) এর মধ্যে রাখতে হবে।.row
এবং .col-sm-4
মাধ্যমে সহজে এবং দ্রুততার সহিত গ্রীড লে-আউট তৈরি করা যায়।.rows
এর প্রথম এবং শেষ কলামে নেগেটিভ মার্জিন ব্যবহৃত হয়।.col-sm-4
ক্লাস ব্যবহার করতে হবে।নিচে বুটস্ট্রাপ গ্রীডের একটি বেসিক গঠন দেখানো হলোঃ
kt_satt_skill_example_id=1210
তাহলে, আপনি যে লে-আউট চান সেটি তৈরি করার জন্য প্রথমে একটি কন্টেইনার তৈরি করুন (< div class="container" >
)। তারপর, একটি সারি(row) তৈরি করুন (< div class="row" >
)। তারপর প্রয়োজন অনুযায়ী কলামের সংখ্যা যুক্ত করুন। ( .col-*-*
ক্লাসের সাহায্য)। মনে রাখবেন প্রতি সারিতে সর্বোচ্চ ১২টি কলাম যুক্ত করতে পারবেন।
নিম্নলিখিত টেবিলে দেখানো হলো কিভাবে বিভিন্ন ডিভাইসে বুটস্ট্রাপ গ্রীড সিস্টেম কাজ করেঃ
অতি ছোট ডিভাইস ফোন (<768px) | ছোট ডিভাইস ট্যাবলেট (>=768px) | মিডিয়াম ডিভাইস ডেস্কটপ (>=992px) | বৃহদাকার ডিভাইস বড় ডেস্কটপ (>=1200px) | |
---|---|---|---|---|
গ্রীডের আচরন | সবক্ষেত্রেই আনুভূমিক হয় | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints |
Container width | নেই (auto) | 750px | 970px | 1170px |
Class prefix | .col-xs- | .col-sm- | .col-md- | .col-lg- |
Number of columns | 12 | 12 | 12 | 12 |
Column width | Auto | ~62px | ~81px | ~97px |
গাটারের প্রশস্ততা | 30px (প্রতি কলামের উভয়পাশে 15px করে) | 30px (প্রতি কলামের উভয়পাশে 15px করে) | 30px (প্রতি কলামের উভয়পাশে 15px করে) | 30px (প্রতি কলামের উভয়পাশে 15px করে) |
নেস্টেবল | হ্যাঁ | হ্যাঁ | হ্যাঁ | হ্যাঁ |
অফসেট | হ্যাঁ | হ্যাঁ | হ্যাঁ | হ্যাঁ |
কলাম ওর্ডারিং | হ্যাঁ | হ্যাঁ | হ্যাঁ | হ্যাঁ |
পরবর্তী অধ্যায়গুলোতে বিভিন্ন ডিভাইসের জন্য গ্রীড সিস্টেমের উদাহরণ দেয়া হয়েছে:
আরও দেখুন...